<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Compact from "./Compact.svelte";
    import { BothSide } from "../BothSide";
    import { Checkbox } from "../Checkbox";
    import { Space } from "../Space";
    import { Avatar } from "../Avatar";
    import Icon from "../Common/Icons/Icon.svelte";
    import { Input } from "../Input";
    import { Select } from "../Select";
    import { Datepicker } from "../Datepicker";
    import { Button } from "../Button";
    import { Spinner } from "../Spinner";

    const { Story } = defineMeta({
        title: "Components/Base/Compact",
        component: Compact,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });

    const start = Date.now() + 60000;
</script>

<Story name="Default">
    {#snippet template(args)}
        <Space dir="v">
            <Compact>
                <Select
                    style="width: 100px;"
                    data={[
                        { label: "https", value: "1" },
                        { label: "tcp", value: "2" },
                    ]}
                />
                <Input placeholder="Search" />
            </Compact>
            <Compact>
                <Select
                    style="width: 100px;"
                    data={[
                        { label: "https", value: "1" },
                        { label: "tcp", value: "2" },
                    ]}
                />
                <Select
                    style="width: 100px;"
                    data={[
                        { label: "https", value: "1" },
                        { label: "tcp", value: "2" },
                    ]}
                />
            </Compact>
            <Compact>
                <Select
                    style="width: 100px;"
                    data={[
                        { label: "https", value: "1" },
                        { label: "tcp", value: "2" },
                    ]}
                />
                <Datepicker style="width: 130px" />
            </Compact>
            <Compact>
                <Input style="width: 150px" />
                <Button type="primary">搜索</Button>
            </Compact>
            <Compact>
                <Input style="width: 150px" />
                <Spinner />
            </Compact>
            <Compact>
                <Select
                    style="width: 100px"
                    data={[
                        { label: "https", value: "1" },
                        { label: "tcp", value: "2" },
                    ]}
                ></Select>
                <Input style="width: 150px" />
                <Button type="primary">搜索</Button>
            </Compact>
        </Space>
    {/snippet}
</Story>
